<template>
  <div class="main conin_pricebox">
    <my-header class="header-main">
      <login-bar></login-bar>
    </my-header>
    <!--内容部分  -->
    <div class="conin_pricemain ">
      <div class="coin_toptab">
        <el-row :gutter="20" style="margin:0">
          <el-col :span="10">
            <div class="grid-content ">
            <ul class="flex top_ul">
              <li class="font-16 active">币币</li>
              <!-- <li class="font-16 ">合约</li> -->
            </ul>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20" style="margin-right:0">
        <el-col :span="19">
          <div class="grid-content bg-purple">
            <div class="coin_mainleft proback_fff">
              <div class="nav_first">
                <ul>
                  <!-- 自选 -->
                  <li @click="areaIndex=4" :class="areaIndex=='4'?'active':''"><i class="el-icon-star-on">自选</i></li>
                  <!-- 币种大区 -->
                  <li v-for="(item,index) in coinArea" :key="index" :class="areaIndex==item.index?'active':''" @click="areaIndex=item.index">
                    {{item.areaName}}
                  </li>
                </ul>

              </div>
              <div class="nav_second">
                <ul>
                  <!-- 主币种选择 -->
                  <li v-for="(item,i) in mainCoinList" :key="i" :class="mainCoinType==item?'active':''" @click="mainCoinType=item;setTableData(areaIndex)">
                    <h3>{{item}}</h3>
                  </li>
                </ul>
              </div>
              <div class="mark_table">
                <!-- 全部币种 -->
                <el-table :data="coinTableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" 
                height="900" @row-click='onTableRowClick' v-text="">
                  <el-table-column prop="tradcoin" label="币种名称" sortable width="210">
                    <template slot-scope="scope">
                      <div class="flex">
                        <div @click.stop="setMyList(scope.row,scope.$index)" :title="$t('label109')" class="option wh-full" >
                          <i class="icon-star font-16 " :class="scope.row.isMyLike?'el-icon-star-on star_active':'el-icon-star-off star_deft'" > </i>
                        </div>
                        <p class="font-w600">{{scope.row.tradcoin}}&nbsp;/&nbsp;</p>
                        <span>{{scope.row.chinaname}}</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="最新价" sortable width="180">
                    <template slot-scope="scope">
                      <P>{{scope.row.price*1}}</P>
                      <span>≈ ¥ {{scope.row.cny*1}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="涨幅" sortable >
                    <template slot-scope="scope">
                      <span :class="scope.row.rise >= '0' ? 'color-pgreen' : 'color-pred '"  v-if="scope.row.rise>=0">+{{scope.row.rise}}%</span>
                      <span :class="scope.row.rise < '0' ? 'color-pred' : 'color-pgreen '"  v-if="scope.row.rise<0">{{scope.row.rise}}%</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="height" label="最高价" >
                    <template slot-scope="scope">
                      <P>{{scope.row.height*1}}</P>
                    </template>
                  </el-table-column>
                  <el-table-column prop="low" label="最低价" >
                    <template slot-scope="scope">
                      <P>{{scope.row.low*1}}</P>
                    </template>
                  </el-table-column>
                  <el-table-column prop="number" label="24H量" >
                    <template slot-scope="scope">
                      <P>{{scope.row.volume}}</P>
                    </template>
                  </el-table-column>
                  <el-table-column prop="number" label="24H成交额" >
                    <template slot-scope="scope">
                      <P>￥{{(scope.row.volume*scope.row.cny*1).toFixed(2)}}</P>
                    </template>
                  </el-table-column>
                </el-table>
                
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple proback_fff">
            <div slot="header" class="rightnav_first">
                <span class="font-16 font-bold nav_title">概况</span>
                <i class="el-icon-star-on"></i>
            </div>
          <div class="coinmain_right ">
              <div  class="right_itrm coin_one flex">
                <div class="coin_oneleft">
                  <h2 class="font-20 coin_name">{{coinInfo.tradcoin}} / {{coinInfo.maincoin}}</h2>
                  <span class="blckname font-12"
                    v-text="coinInfo.plate=='main'?'主板':'创新版'"></span> 
                </div>
                <div>
                    <el-button type="primary" size="small" @click="toTrad()">去交易</el-button>
                </div>
              </div>
              <div class="line-box m-top-15">
                <!-- <div class="line-left line-img">
                  <img src="../../assets/images/trade/priline1.png" alt="" srcset="">
                </div> -->
                <p v-text="coinInfo.chinaname"></p>
                <div class="line-right">
                  <h3>{{coinInfo.price}}</h3>
                  <p>≈ ¥{{coinInfo.cny}}</p>
                </div>
                <div class="price_cor">
                  <p class="m-bot-5">24H量: {{coinInfo.volume}}</p>
                  <p :class="coinInfo.rise >= '0' ? 'color-pgreen' : 'color-pred '" 
                      v-if="coinInfo.rise>=0">+{{coinInfo.rise}}%</p>
                  <p :class="coinInfo.rise < '0' ? 'color-pred' : 'color-pgreen '" 
                      v-if="coinInfo.rise<0">{{coinInfo.rise}}%</p>
                </div>
              </div>
              <div class="coininfo">
                <template>
                  <el-tabs v-model="activeName" >
                    <el-tab-pane label="基本信息" name="first">
                      <div class="infolist">
                        <div class="flex-between">
                          <p>币种名称</p><p>{{coinDetails.symbol}}</p>
                        </div>
                        <div class="flex-between">
                          <p>发行时间</p><p>----</p>
                        </div>
                        <div class="flex-between">
                          <p>发行总量</p><p>{{coinDetails.number}}</p>
                        </div>
                        <div class="flex-between">
                          <p>相关链接</p><p>{{coinDetails.web}}</p>
                        </div>
                      </div>
                      <div class="disp">
                          <p>简介</p>
                          <p>{{coinDetails.info}}</p>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </template>
              </div>
              
              
          </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import {
  addCustomList,
  removeCustomList
} from "@/assets/js/common.js";
export default {
  data() {
    return {
      areaIndex:'1',
      coinArea:[ 
        {areaName:'全部行情',index:'1'}, 
        {areaName:'主板',index:'2'},
        {areaName:'创新版',index:'3'}
      ],
      mainCoinList:[],
      mainCoinType:'USDT',

      allCoinList:[],
      coinTableData:[],
      coinInfo:{},
      coinDetails:{},


      activeName:'first',
      
      tradcoin:'',
      maincoin:'',
    };
  },
  //实时获取更新的数据,webSocket
  computed:{
    marketSocketData(){
      return this.$store.state.marketSocketData
    }
  },
  watch:{
    marketSocketData(data){
      data.symbols&&this.processData(data.symbols);
    },

    areaIndex(val){
      this.setTableData(val)
    }
  },
  created () {
   //判断当缓存有数据的时候直接用,没有就调用对应的接口  processData
    if(this.marketSocketData.symbols){
      this.processData(this.marketSocketData.symbols)
    }else{
      this.getsymbols();
    }
    
  },
  methods: {
    // 币种列表
    getsymbols(){
      this.allCoinList=[];
      this.request(this.api.symbols).then(res => {
        if(res.code==0&&res.data.length>0){
          this.processData(res.data)
        }else{
          this.allCoinList=[];
        }
      });
    },

    //处理行情数据包
    processData(resData){
      let listArr=[];
      resData.forEach(item=>{
        let data = Object.assign({},item)
        if(!this.mainCoinList.includes(data.maincoin)){
          this.mainCoinList.push(data.maincoin)
        }
        if(!this.mainCoinType){
          this.mainCoinType = this.mainCoinList[0]
        }
        this.$set(data,'isMyLike',false);
        listArr.push(data)
      })
      //设置自选
      let customList = this.storage.get("customList");
      customList&&customList.forEach(data=>{
        listArr.forEach(item=>{
          if(data.tradcoin==item.tradcoin&&data.maincoin==item.maincoin){
            this.$set(item,'isMyLike',!!data.isMyLike);
          }
        })
      })

     //选中列表中的模块的数据的及时更新处理
      let selectedCoin = JSON.parse(sessionStorage.getItem('selectedCoin'));
      if(selectedCoin){
        this.tradcoin = selectedCoin.tradcoin;
        this.maincoin = selectedCoin.maincoin;
      }else{
        this.tradcoin = listArr[0].tradcoin;
        this.maincoin = listArr[0].maincoin;
      }

      this.allCoinList = listArr;

      //设置表格应该展示的数据
      this.setTableData(this.areaIndex)

      //设置右侧数据
      this.setRightData();
    },

    //设置表格应该展示的数据  根据大区划分  再通过主币种筛选
    setTableData(areaIndex){
      this.coinTableData = [];
      if(areaIndex==1){
        this.coinTableData = this.allCoinList.filter(data=> (data.maincoin==this.mainCoinType));
      }else if(areaIndex==2){
        this.coinTableData = this.allCoinList.filter(data=>(data.maincoin==this.mainCoinType&&data.plate=='main'));
      }else if(areaIndex==3){
        this.coinTableData = this.allCoinList.filter(data=>(data.maincoin==this.mainCoinType&&data.plate=='pioneer'));
      }else if(areaIndex==4){
        this.coinTableData = this.allCoinList.filter(data=>(data.maincoin==this.mainCoinType&&data.isMyLike));
      }
      // console.log(this.coinTableData);
    },
  
  
    //表格行点击  选择coin
    onTableRowClick(rowData) {
      this.tradcoin = rowData.tradcoin;
      this.maincoin = rowData.maincoin;
      sessionStorage.setItem('selectedCoin',JSON.stringify(rowData))
      this.setRightData();
    },

    //设置右侧数据
    setRightData(){
      //判断是否是前一个币种  this.coinInfo 是前一个币种数据  
      if(this.tradcoin==this.coinInfo.tradcoin&&this.maincoin==this.coinInfo.maincoin){
        if(!this.coinDetails.symbol){
          this.getCoinDetails();
        }
      }else{
        this.getCoinDetails();
      }

      //设置 筛选出当前币种信息
      this.coinInfo = this.allCoinList.find(data=>(this.tradcoin==data.tradcoin&&this.maincoin==data.maincoin));
      this.coinInfo&&(document.title = `${this.coinInfo.price} ${this.coinInfo.tradcoin}/${this.coinInfo.maincoin} 星空交易所`)

    },
    getCoinDetails(){
      // 查看右侧的币种详情 gettradcoin
      this.request(this.api.currency_introduction,{maincoin:this.maincoin,coin:this.tradcoin}).then(res => {
        if(res.code==0){
          this.coinDetails=res.data[0];
        }else{
          this.coinDetails={};
        }
      });
    },

    //跳转币币交易
    toTrad(){
      //缓存右侧数据
      sessionStorage.setItem('quotationDetailsData',JSON.stringify(this.coinInfo));
      this.navigateTo('currency_trade');
    },
    
    // 设置自选
    setMyList(rowData, index) {
      this.$set(this.coinTableData, index, rowData);
      rowData.isMyLike = !rowData.isMyLike;
      if (rowData.isMyLike) {
        addCustomList(rowData);
      } else {
        removeCustomList(rowData);
        if(this.areaIndex==4){
          this.coinTableData.splice(index,1);
        }
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.el-table .hidden-row {
  display: none;
}
.conin_pricemain{
  .coin_toptab{
    height: 50px;
    padding-bottom: 0px;
    background-color: #1b2945;
    border-top: 1px solid #17232f;
    .grid-content {
      height: 40px;
      .top_ul{
        display: flex;
        color: #9ca9b5;
        font-size: 16px;
        line-height: 40px;
        text-align: center;
        li{transition: all .2s ease-in-out;width: 145px;cursor: pointer;}
        .active{color: #ffffff;}
      }
    }
  }
  // 币种
  .nav_first{
    background-color: #f2f6fa;
    ul{
      display: flex;cursor: pointer;
      li{height: 40px;padding: 0 24px;line-height: 36px;text-align: center;border-top: 2px solid transparent;}
      .active{
        color: #1c242c!important;
        border-color: #357ce1;
        background-color: #fff;
      }
    }
  }
  .nav_second {
    z-index: 1;
    height: 60px;
    position: relative;
    padding-left: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #e6ecf2;
    ul{
      li{color: #596a7a;
        width: 70px;
        height: 28px;
        margin: 16px 16px 16px 0;
        cursor: pointer;
        line-height: 28px;
        border-radius: 2px;
        text-align: center;
        display: inline-block;
        text-transform: uppercase;
        &:hover{background: #f2f6fa;}
      }
      
    }
  }
  .nav_second li.active, .nav_second li.active:hover{background-color: #357ce1;color: #fff;}
}
.flex{display: flex; align-items:center;}
// 右侧
.rightnav_first {
    z-index: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: relative;
    background-color: #f2f6fa;
    overflow: hidden;
    display: flex;justify-content: space-between;align-items:center;
    .nav_title {
        color: #1c242c;
        float: left;
        z-index: 14;
        font-weight: 600;
        padding-left: 24px;
    }
    i{font-size: 24px;padding-right: 20px;}
  }
.coinmain_right{
  padding: 0 15px;
  .coin_one{align-items:center;justify-content:space-between;margin-top: 30px;}
  .blckname{display:inline-block;padding: 5px;
    border: 1px solid #4869f6;margin-top: 10px;border-radius: 4px;color:#4869f6;
  }
  .line-box{
    display: flex;justify-content:space-between;
    .line-img{
      img{width: 100%;}
    }
    .line-right{
      h3{color: #ef5656;font-size: 20px;line-height: 24px;}
      p{color: #333333;line-height: 20px;}
    }
    .m-bot-5{margin-bottom: 5px;}
  }
  .infolist{
    p{line-height: 30px;}
    p:nth-child(1){color: #9ca9b5;}
    p:nth-child(2){color: #596a7a;}
  }
  .disp{
    p{line-height: 20px;}
    p:nth-child(1){color: #9ca9b5;}
    p:nth-child(2){color: #596a7a;}
  }
}
.conin_pricemain {background: #e5ebf5;min-width: $min-boxwh;}
.proback_fff{background: #ffffff;min-height: 950px;}
.option{
  width: 30px;
  i{cursor: pointer;font-size: 16px;}
  .star_deft{color:#96b4c6;}
  .star_active{color:#357ce1;font-size: 18px;}
  .active{color: #1c242c !important;border-color: #357ce1;background-color: #fff;}
}
</style>